<template>
<van-nav-bar
  title="个人中心"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
<van-image round  width="100px"  height="100px"   :src= "'http://127.0.0.1:8000'+user.avartar" /><van-button type="primary" @click="showPopup">更换头像</van-button>
<van-popup v-model:show="show" position="top" :style="{ height: '30%' }">
    上传图片
    <el-upload
      ref="upload"
      class="upload-demo"
      action="http://127.0.0.1:8000/img/"
      :limit="1"
      :on-exceed="handleExceed"
      name="img"
      :auto-upload="false"
    >
      <template #trigger>
        <el-button type="primary">选择文件</el-button>
      </template>
      <el-button class="ml-3" type="success" @click="submitUpload">
        上传文件
      </el-button>
      <template #tip>
        <div class="el-upload__tip text-red">
          最大上传文件为1  新文件会覆盖旧文件
        </div>
      </template>
    </el-upload>

</van-popup>
<van-cell :title="'昵称:'+ user.name " is-link @click="showname"  />
<van-popup v-model:show="uname" :style="{ padding: '64px' }" @close="getuserById(user.id)">
  <p><van-field v-model="user.name" label="昵称" placeholder="请输入昵称" /></p>
  <van-button type="primary" @click="changeuser">确认修改</van-button>
</van-popup>

<van-cell :title="'简介:'+ user.address " is-link @click="showdesc" />
<van-popup v-model:show="udesc" :style="{ padding: '64px' }" @close="getuserById(user.id)">
  <p><van-field v-model="user.address" label="简介" placeholder="请输入简介" /></p>
  <van-button type="primary" @click="changeuser">确认修改</van-button>
</van-popup>




</template>
<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import axios from 'axios';
import { genFileId } from 'element-plus'

const router = useRouter();
const onClickLeft = () => router.back();
const route = useRoute();
const show = ref(false);
const uname = ref(false);
const udesc = ref(false);

const showPopup = () => {
      show.value = true;
    };
const showname = () => {
      uname.value = true;
    };
const showdesc = () => {
      udesc.value = true;
    };
const avartar = ref([]);
const user = reactive({
    id: localStorage.getItem('userid'),
    name: '小猫咪',
    age: 18,
    avartar: avartar,
    sex: '男',
    address: '这个人很懒，什么都没有留下',
    phone: '',
    score : 0,
    coupon :[],
    balance: 0

})

const getuserById = async (id) => {
    const res = await axios.get(`http://localhost:8000/zhxy/user/info/?userid=${id}`);
    user.name = res.data.data.name;
    user.avartar = res.data.data.img;
    user.phone = res.data.data.phone;
    user.score = res.data.data.score;
    user.balance = res.data.data.balance;
}

const upload = ref<UploadInstance>()
  
const handleExceed: UploadProps['onExceed'] = (files) => {
    upload.value!.clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    upload.value!.handleStart(file)
  }
  
const submitUpload = () => {
    upload.value!.submit()
  }
const changeuser = async () => {
  axios.post('http://localhost:8000/zhxy/user/update/', {
    userid: user.id,
    name: user.name,
    phone: user?.phone|| '',
  }).then(
    uname.value = false,
    udesc.value = false
  )
}
// const upload= async () => {
//     axios.post('http://localhost:8000/zhxy/upload/',avartar.value ).then(res => {
//         console.log(res.data.msg)
//     })
// }

onMounted(() => {
    getuserById(localStorage.getItem('userid'))
})

</script>
